<template>
  <div>
    <el-table
      :data="tableData"
      class="table"
      height="306px"
      border
      ref="jdjgTable"
      :header-cell-style="{
        padding: '0px',
        background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
      }"
      @selection-change="handleSelectionChange"
      :row-class-name="tabRowClassName"
      header-row-class-name="mapTable_th"
    >
      <el-table-column type="selection" width="60" align="center"> </el-table-column>
      <el-table-column label="编码" align="center" prop="itemCode" width="240"> </el-table-column>
      <el-table-column label="分类名称" align="center" prop="itemName"> </el-table-column>
      <el-table-column label="商品名" align="center" prop="goodsName"> </el-table-column>
      <el-table-column label="税率" align="center" prop="rate">
        <template slot-scope="scope">
          <div>{{ scope.row.rate }}{{ scope.row.rate ? '%' : '' }}</div>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    selected: {
      type: Array
    }
  },
  data() {
    return {
      tableData: [],
      selectList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    subBtn() {
      this.$emit('close', this.selectList)
    },
    closeBtn() {
      this.$emit('close', '')
    },
    handleSelectionChange(val) {
      this.selectList = val
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/enterpriseVat/getList',
        data: {
          enterpriseId: localStorage.getItem('enterpriseId')
        }
      })
        .then(res => {
          if (res.code == 0) {
            // console.log(res.data)
            this.tableData = res.data
            if (this.selected.length) {
              this.selected.forEach(item => {
                this.tableData.forEach((el, index) => {
                  if (item.itemId == el.id) {
                    this.tableData.splice(index, 1)
                  }
                })
              })
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.footer {
  text-align: center;
  margin-top: 20px;
}
</style>
